<!-- html -->
<template>
  <h2 class="h2">自定义ref</h2>
  <span class="span2">ref：</span>
  <span class="span2">{{ num1 }}</span>
  <input class="input1" type="number" v-model="num1">
  <hr class="hr1">
  <span class="span2">自定义ref：</span>
  <span class="span2">{{ num2 }}</span>
  <input class="input1" type="number" v-model="num2">
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'customRefTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { ref, customRef } from 'vue'
//数据
let num1 = ref(1)
let num2 = customRef((track, trigger) => {
  let initNum = 1
  let timer: NodeJS.Timeout
  return {
    get() {
      //通知Vue追踪数据
      track()
      return initNum
    },
    set(value: number) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        initNum = value
        //通知Vue数据变化
        trigger()
      }, 1000);
    }
  }
})
</script>

<!-- 样式 -->
<style scoped></style>